<template>
  <div class="launch-chat">
    <van-nav-bar
      title="发起聊天"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickBack"
    >
      <template #left>
        <i class="iconfont icon-zuojiantou"></i>
      </template>
    </van-nav-bar>

    <div class="launch-chat-person">
      <van-search
        v-model="searchPersonWord"
        placeholder="请输入搜索关键词"
        @update:model-value="searchPersonHandle"
      />
      <div class="launch-chat-person-list" v-if="searchedPerson.length === 0">
        <person-item
          v-for="item in list"
          :key="item.username"
          :person-info="item"
        />
      </div>
      <div class="launch-chat-person-list" v-else>
        <person-item
          v-for="item in searchedPerson"
          :key="item.username"
          :person-info="item"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import PersonItem from "./components/person-item.vue";
const jpg1 = require("@/assets/images/1.jpg");
const jpg2 = require("@/assets/images/2.jpg");
const jpg3 = require("@/assets/images/3.jpg");
const jpg4 = require("@/assets/images/4.jpg");
const jpg5 = require("@/assets/images/5.jpg");
const jpg6 = require("@/assets/images/6.jpg");
const jpg7 = require("@/assets/images/7.jpg");
const jpg8 = require("@/assets/images/8.jpg");
const jpg9 = require("@/assets/images/9.jpg");
const jpg10 = require("@/assets/images/jpg10.webp");
const jpg11 = require("@/assets/images/jpg11.webp");
const jpg12 = require("@/assets/images/jpg12.webp");
const jpg13 = require("@/assets/images/jpg13.webp");
const jpg14 = require("@/assets/images/jpg14.webp");
const jpg15 = require("@/assets/images/jpg15.webp");
const jpg16 = require("@/assets/images/jpg16.webp");
const jpg17 = require("@/assets/images/jpg17.webp");
const imgs = [
  jpg1,
  jpg2,
  jpg3,
  jpg4,
  jpg5,
  jpg6,
  jpg7,
  jpg8,
  jpg9,
  jpg10,
  jpg11,
  jpg12,
  jpg13,
  jpg14,
  jpg15,
  jpg16,
  jpg17,
];
const names = [
  "圣地兰",
  "甜多夫斯基",
  "哥斯拉",
  "萝莉仙女爱吃草",
  "小欣欣",
  "奶油大萝卜",
  "龙希胜",
  "随机名字",
  "没得办法",
  "咸鱼一条",
  "哦豁",
  "重庆娃子",
  "老北京葱油饼",
  "嘿嘿嘿",
  "狗子和我",
  "陈大爷",
];
interface listInterface {
  img: string;
  username: string;
}
const searchPersonWord = ref<string>("");
const searchedPerson = ref<listInterface[]>([]);

const list = ref<listInterface[]>([]);
// 返回上一页
const onClickBack = () => {
  history.back();
};
const getMockList = (length: number) => {
  for (let index = 0; index < length; index++) {
    list.value.push({
      img: imgs[Math.floor(Math.random() * imgs.length)],
      username: names[Math.floor(Math.random() * names.length)],
    });
  }
};

const searchPersonHandle = (value: string): void => {
  console.log(value, "这是搜索的内容");
  console.log(list.value, "list");
  searchedPerson.value = list.value.filter((item) =>
    item.username.includes(value)
  );
  console.log(searchedPerson.value, "xxxx");
};

onMounted(() => {
  getMockList(5);
});
</script>

<style scoped lang="less">
.launch-chat {
  height: calc(100vh - 52px);
  background-color: var(--background-color-std-1);
  overflow: auto;
  padding-top: 52px;

  &-person {
    padding-top: 10px;

    &-list {
      padding-top: 10px;
    }

    :deep .van-search__content {
      background-color: #f1f1f1;
    }

    :deep .van-field__control {
      font-size: 13px;
    }
  }

  :deep .person-item:last-of-type .person-item-right {
    border-bottom: none;
  }

  .icon-zuojiantou {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: var(--font-color-std-1);
    background-color: var(--background-color-std-2);
  }

  .van-hairline--bottom:after {
    border-bottom-width: 0;
  }

  .van-search {
    padding: 10px 20px;
  }
}
</style>
